<template>
  <div :class="{'picker-container': true, 'active': isActive}" v-if="show" @click="hide">
    <slot></slot>
    <mt-picker
      ref="picker"
      :class="{'active': isActive}"
      :slots="slots"
      showToolbar
      value-key="value"
      @change="onValuesChange"
    >
      <div @click="cancelClick">
        <span>取消</span>
      </div>
      <div @click="confirmClick">
        <span class="active">确认</span>
      </div>
    </mt-picker>
  </div>
</template>
<script>
import Vue from "vue";
// mint-ui
import "mint-ui/lib/style.css";
import { Picker } from "mint-ui";
Vue.use(Picker.name, Picker);
import region from "./region.js";
export default {
  name: "picker",
  data() {
    return {
      // 显示隐藏相关
      isActive: false,
      timeInterval: 250,
      show: true,
      // 外部接口
      type: "", //类型：selector普通选择器 region：地区选择器 date日期时间选择器
      selectorType: "none", //普通选择器类型
      selectorLevel: 0, //普通选择器等级
      selectorValues: [], //普通选择器数据源
      regionLevel: 3, //区域等级 1 2 3
      dateMode: "none", //日期模式 none date time year month day hour minute second date-year date-month date-day time-hour time-minute time-second
      dateType: "none", //日期类型 none after before
      defaultValue: "", //默认值
      confirmFunction: function() {},
      cancelFunction: function() {},
      // 数据相关
      slots: [],
      selectValues: [],
      // 私有变量
      date: new Date() //当前时间
    };
  },
  methods: {
    // 数值变化
    onValuesChange(picker, values) {
      if (values.length == 0) return;
      this.selectValues = values;
      if (this.type == "selector") {
        var one, two, three;
        if (this.selectorLevel > 1) {
          one = values[0];
          two = values[1];
          if (two.pid != one.id) {
            var towArray = [];
            this.selectorValues[one.index].child.forEach((two, index) => {
              towArray.push({
                value: two.value,
                id: two.id,
                pid: two.pid,
                type: "two",
                index: index
              });
            });
            picker.setSlotValues(1, towArray);
          }
        }
        if (this.selectorLevel > 2) {
          three = values[2];
          if (three.pid == two.id) return;
          var threeArray = [];
          this.selectorValues[one.index].child[two.index].child.forEach(
            (three, index) => {
              threeArray.push({
                value: three.value,
                id: three.id,
                pid: three.pid,
                type: "three",
                index: index
              });
            }
          );
          picker.setSlotValues(2, threeArray);
        }
      } else if (this.type == "region") {
        var province, city, area;
        if (this.regionLevel > 1) {
          province = values[0];
          city = values[1];
          if (city.pid != province.id) {
            var cityArray = [];
            region[province.index].child.forEach((city, index) => {
              cityArray.push({
                value: city.name,
                id: city.id,
                pid: city.pid,
                type: "city",
                index: index
              });
            });
            picker.setSlotValues(1, cityArray); //重新设置市的数组
          }
        }
        if (this.regionLevel > 2) {
          area = values[2];
          if (area.pid == city.id) return;
          var areaArray = [];
          region[province.index].child[city.index].child.forEach(
            (area, index) => {
              areaArray.push({
                value: area.name,
                id: area.id,
                pid: area.pid,
                type: "area",
                index: index
              });
            }
          );
          picker.setSlotValues(2, areaArray); //重新设置区的数组
        }
      } else if (this.type == "date") {
        // 当前时间
        var currentTimestamp = this.currentDate().timestamp,
          currentYear = this.currentDate().year,
          currentMonth = this.currentDate().month,
          currentDay = this.currentDate().day,
          currentHour = this.currentDate().hour,
          currentMinute = this.currentDate().minute,
          currentSecond = this.currentDate().second,
          // 当前选中时间
          selectedYear = currentYear,
          selectedMonth = currentMonth,
          selectedDay = currentDay,
          selectedHour = currentHour,
          selectedMinute = currentMinute,
          selectedSecond = currentSecond,
          // 当前选中时间的列
          selectedYearColumn = -1,
          selectedMonthColumn = -1,
          selectedDayColumn = -1,
          selectedHourColumn = -1,
          selectedMinuteColumn = -1,
          selectedSecondColumn = -1,
          // 当前选中时间的行
          selectedYearIndex = 0,
          selectedMonthIndex = 0,
          selectedDayIndex = 0,
          selectedHourIndex = 0,
          selectedMinuteIndex = 0,
          selectedSecondIndex = 0;
        values.forEach((item, index) => {
          var type = item.type;
          if (type == "year") {
            //当前选中的年
            selectedYearColumn = index;
            selectedYear = item.value;
            selectedYearIndex = item.index;
          } else if (type == "month") {
            //当前选中的月
            selectedMonthColumn = index;
            selectedMonth = item.value;
            selectedMonthIndex = item.index;
          } else if (type == "day") {
            //当前选中的日
            selectedDayColumn = index;
            selectedDay = item.value;
            selectedDayIndex = item.index;
          } else if (type == "hour") {
            //当前选中的时
            selectedHourColumn = index;
            selectedHour = item.value;
            selectedHourIndex = item.index;
          } else if (type == "minute") {
            //当前选中的分
            selectedMinuteColumn = index;
            selectedMinute = item.value;
            selectedMinuteIndex = item.index;
          } else {
            //当前选中的秒
            selectedSecondColumn = index;
            selectedSecond = item.value;
            selectedSecondIndex = item.index;
          }
        });
        // 重新整理年月日时分秒数据
        // 开始 - 结束
        var startYear =
            this.dateType == "after" ? currentYear : currentYear - 100,
          endYear = this.dateType == "before" ? currentYear : currentYear + 100,
          startMonth =
            this.dateType == "after" && selectedYear == currentYear
              ? currentMonth
              : 1,
          endMonth =
            this.dateType == "before" && selectedYear == currentYear
              ? currentMonth
              : 12,
          startDay =
            this.dateType == "after" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth
              ? currentDay
              : 1,
          endDay =
            this.dateType == "before" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth
              ? currentDay
              : this.$.date.daysCount(selectedYear, selectedMonth),
          startHour =
            this.dateType == "after" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth &&
            selectedDay == currentDay
              ? currentHour
              : 0,
          endHour =
            this.dateType == "before" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth &&
            selectedDay == currentDay
              ? currentHour
              : 23,
          startMinute =
            this.dateType == "after" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth &&
            selectedDay == currentDay &&
            selectedHour == currentHour
              ? currentMinute
              : 0,
          endMinute =
            this.dateType == "before" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth &&
            selectedDay == currentDay &&
            selectedHour == currentHour
              ? currentMinute
              : 59,
          startSecond =
            this.dateType == "after" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth &&
            selectedDay == currentDay &&
            selectedHour == currentHour &&
            selectedMinute == currentMinute
              ? currentSecond
              : 0,
          endSecond =
            this.dateType == "before" &&
            selectedYear == currentYear &&
            selectedMonth == currentMonth &&
            selectedDay == currentDay &&
            selectedHour == currentHour &&
            selectedMinute == currentMinute
              ? currentSecond
              : 59;
        // 重新赋值年月日时分秒数据
        // 年
        if (selectedYearColumn != 1) {
          var yearArray = [];
          var selectedIndex = 0;
          for (var i = startYear, j = 0; i < endYear; i++, j++) {
            if (i == selectedYear) selectedIndex = j;
            yearArray.push({
              value: i,
              id: "",
              type: "year",
              index: j
            });
          }
          picker.setSlotValues(selectedYearColumn, yearArray);
          // 重新赋值一下当前选择
          if (selectedIndex != selectedYearIndex) {
            picker.setSlotValue(selectedYearColumn, monthArray[selectedIndex]);
          }
          // 使用ref查找元素修改样式
          this.changeColor(selectedYearColumn, selectedIndex);
        }
        // 月
        if (selectedMonthColumn != -1) {
          var monthArray = [];
          var selectedIndex = 0;
          for (var i = startMonth, j = 0; i <= endMonth; i++, j++) {
            if (i == selectedMonth) selectedIndex = j;
            monthArray.push({
              value: i < 10 ? "0" + i : i,
              id: "",
              type: "month",
              index: j
            });
          }
          picker.setSlotValues(selectedMonthColumn, monthArray);
          // 重新赋值一下当前选择
          if (selectedIndex != selectedMonthIndex) {
            picker.setSlotValue(selectedMonthColumn, monthArray[selectedIndex]);
          }
          // 使用ref查找元素修改样式
          this.changeColor(selectedMonthColumn, selectedIndex);
        }
        if (selectedDayColumn != -1) {
          // 日
          const daysCount = this.$.date.daysCount(selectedYear, selectedMonth);
          var dayArray = [];
          var selectedIndex = 0;
          for (var i = startDay, j = 0; i <= endDay; i++, j++) {
            if (i == selectedDay) selectedIndex = j;
            dayArray.push({
              value: i < 10 ? "0" + i : i,
              id: "",
              type: "day",
              index: j,
              daysCount: daysCount
            });
          }
          picker.setSlotValues(selectedDayColumn, dayArray);
          // 重新赋值一下当前选择
          if (selectedIndex != selectedDayIndex) {
            picker.setSlotValue(selectedDayColumn, dayArray[selectedIndex]);
          }
          // 使用ref查找元素修改样式
          this.changeColor(selectedDayColumn, selectedIndex);
        }
        // 时
        if (selectedHourColumn != -1) {
          var hourArray = [];
          var selectedIndex = 0;
          for (var i = startHour, j = 0; i <= endHour; i++, j++) {
            if (i == selectedHour) selectedIndex = j;
            hourArray.push({
              value: i < 10 ? "0" + i : i,
              id: "",
              type: "hour",
              index: j
            });
          }
          picker.setSlotValues(selectedHourColumn, hourArray);
          // 重新赋值一下当前选择
          if (selectedIndex != selectedHourIndex) {
            picker.setSlotValue(selectedHourColumn, hourArray[selectedIndex]);
          }
          // 使用ref查找元素修改样式
          this.changeColor(selectedHourColumn, selectedIndex);
        }
        // 分
        if (selectedMinuteColumn != -1) {
          var minuteArray = [];
          var selectedIndex = 0;
          for (var i = startMinute, j = 0; i <= endMinute; i++, j++) {
            if (i == selectedMinute) selectedIndex = j;
            minuteArray.push({
              value: i < 10 ? "0" + i : i,
              id: "",
              type: "minute",
              index: j
            });
          }
          picker.setSlotValues(selectedMinuteColumn, minuteArray);
          // 重新赋值一下当前选择
          if (selectedIndex != selectedMinuteIndex) {
            picker.setSlotValue(
              selectedMinuteColumn,
              minuteArray[selectedIndex]
            );
          }
          // 使用ref查找元素修改样式
          this.changeColor(selectedMinuteColumn, selectedIndex);
        }
        // 秒
        if (selectedSecondColumn != -1) {
          var secondArray = [];
          var selectedIndex = 0;
          for (var i = startSecond, j = 0; i <= endSecond; i++, j++) {
            if (i == selectedSecond) selectedIndex = j;
            secondArray.push({
              value: i < 10 ? "0" + i : i,
              id: "",
              type: "second",
              index: j
            });
          }
          picker.setSlotValues(selectedSecondColumn, secondArray);
          // 重新赋值一下当前选择
          if (selectedIndex != selectedSecondIndex) {
            picker.setSlotValue(
              selectedSecondColumn,
              secondArray[selectedIndex]
            );
          }
          // 使用ref查找元素修改样式
          this.changeColor(selectedSecondColumn, selectedIndex);
        }
      }
    },
    // 当前时间
    currentDate() {
      const date = this.date;
      return {
        timestamp: date.getTime() / 1000,
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate(),
        hour: date.getHours(),
        minute: date.getMinutes(),
        second: date.getSeconds()
      };
    },
    // 默认时间
    defaultDate() {
      const defaultValue = this.defaultValue;
      const date = defaultValue == "" ? this.date : new Date(defaultValue);
      return {
        timestamp: date.getTime() / 1000,
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate(),
        hour: date.getHours(),
        minute: date.getMinutes(),
        second: date.getSeconds()
      };
    },
    // 使用ref查找元素修改样式
    changeColor(column, index) {
      var children = this.$refs.picker.$children[column].$refs.wrapper.children;
      for (var i = 0; i < children.length; i++) {
        var element = children[i];
        if (i == index) {
          element.style.color = "#000000";
        } else {
          element.style.color = "#707274";
        }
      }
    },
    // 设置默认选中第1项
    setup() {
      var array = [];
      this.slots.forEach(item => {
        array.push(item.values[item.defaultIndex]);
      });
      this.selectValues = array;
    },
    confirmClick(index) {
      this.hide();
      // 组合值this.selectValues是一个数组，里面包含的是每一列选中的对象
      var valueArray = [],
        id = "";
      this.selectValues.forEach(item => {
        valueArray.push(item.value);
        if (this.type == "selector") {
          valueArray.push("-");
        } else if (this.type == "region") {
          valueArray.push("-");
        } else if (this.type == "date") {
          // 类型 none date time year month day hour minute second date-year date-month date-day time-hour time-minute time-second
          var containArray = [
            "none",
            "date",
            "year",
            "month",
            "day",
            "hour",
            "minute",
            "second",
            "date-year",
            "date-month",
            "date-day"
          ];
          if (item.type == "year" && containArray.indexOf(this.dateMode) != -1)
            valueArray.push("-");
          containArray = [
            "none",
            "date",
            "month",
            "day",
            "hour",
            "minute",
            "second",
            "date-month",
            "date-day"
          ];
          if (item.type == "month" && containArray.indexOf(this.dateMode) != -1)
            valueArray.push("-");
          containArray = [
            "none",
            "date",
            "day",
            "hour",
            "minute",
            "second",
            "date-day"
          ];
          if (item.type == "day" && containArray.indexOf(this.dateMode) != -1)
            valueArray.push(" ");
          containArray = [
            "none",
            "hour",
            "minute",
            "second",
            "time-hour",
            "time-minute",
            "time-second"
          ];
          if (item.type == "hour" && containArray.indexOf(this.dateMode) != -1)
            valueArray.push(":");
          containArray = [
            "none",
            "minute",
            "second",
            "time-minute",
            "time-second"
          ];
          if (
            item.type == "minute" &&
            containArray.indexOf(this.dateMode) != -1
          )
            valueArray.push(":");
          containArray = ["none", "second", "time-second"];
          if (
            item.type == "second" &&
            containArray.indexOf(this.dateMode) != -1
          )
            valueArray.push(":");
        }
        id = item.id;
      });
      // 删除最后一项
      valueArray.pop();
      if (this.confirmFunction)
        this.confirmFunction({
          value: valueArray.join(""),
          id: id
        });
    },
    cancelClick() {
      this.hide();
      if (this.cancelFunction) this.cancelFunction();
    },
    hide() {
      this.isActive = false;
      setTimeout(() => {
        this.show = false;
      }, this.timeInterval);
    }
  },
  beforeUpdate() {
    // 防止重复加载
    if (this.slots.length > 0) return;
    if (this.type == "selector") {
      //数据源
      // this.selectorValues = [
      //   {
      //     pid: 0,
      //     id: 1,
      //     value: "山东",
      //     child: [
      //       { pid: 1,id: 11, value: "滨州", child: [] },
      //       { pid: 1,id: 12, value: "东营", child: [] }
      //     ]
      //   },
      //   {
      //     pid: 0,
      //     id: 2,
      //     value: "上海",
      //     child: [
      //       { pid: 2,id: 21, value: "青浦区", child: [] },
      //       { pid: 2,id: 22, value: "浦东新区", child: [] }
      //     ]
      //   }
      // ];
      //计算等级
      if (this.selectorValues.length > 0) {
        this.selectorLevel = 1;
        var child = this.selectorValues[0].child || [];
        if (child.length > 0) {
          this.selectorLevel = 2;
          child = child[0].child;
          if (child.length > 0) {
            this.selectorLevel = 3;
          }
        }
      }
      //设置默认值
      var defaultArray = [];
      var defaultValue = this.defaultValue;
      if (defaultValue != "") {
        defaultArray = defaultValue.split("-");
      }
      var defaultOne = defaultArray.length > 0 ? defaultArray[0] : "",
        defaultTwo = defaultArray.length > 1 ? defaultArray[1] : "",
        defaultThree = defaultArray.length > 2 ? defaultArray[2] : "",
        defaultOneIndex = 0,
        defaultTwoIndex = 0,
        defaultThreeIndex = 0;

      //普通选择器
      var oneArray = [],
        twoArray = [],
        threeArray = [];
      if (this.selectorLevel > 0) {
        this.selectorValues.forEach((one, index) => {
          if (one.value == defaultOne) defaultOneIndex = index;
          oneArray.push({
            value: one.value,
            id: one.id,
            pid: one.pid,
            type: "one",
            index: index
          });
        });
        this.slots.push({
          flex: 1,
          defaultIndex: defaultOneIndex,
          textAlign: "center",
          values: oneArray
        });
      }
      if (this.selectorLevel > 1) {
        this.selectorValues[defaultOneIndex].child.forEach((two, index) => {
          if (two.value == defaultTwo) defaultTwoIndex = index;
          twoArray.push({
            value: two.value,
            id: two.id,
            pid: two.pid,
            type: "two",
            index: index
          });
        });
        this.slots.push({
          flex: 1,
          defaultIndex: defaultTwoIndex,
          textAlign: "center",
          values: twoArray
        });
      }
      if (this.selectorLevel > 2) {
        this.selectorValues[defaultOneIndex].child[
          defaultTwoIndex
        ].child.forEach((three, index) => {
          if (three.value == defaultThree) defaultThreeIndex = index;
          threeArray.push({
            value: three.value,
            id: three.id,
            pid: three.pid,
            type: "three",
            index: index
          });
        });
        this.slots.push({
          flex: 1,
          defaultIndex: defaultThreeIndex,
          textAlign: "center",
          values: threeArray
        });
      }
    } else if (this.type == "region") {
      // 设置默认值
      var defaultArray = [];
      var defaultValue = this.defaultValue;
      if (defaultValue != "") {
        defaultArray = defaultValue.split("-");
      }
      var defaultProvince = defaultArray.length > 0 ? defaultArray[0] : "",
        defaultCity = defaultArray.length > 1 ? defaultArray[1] : "",
        defaultArea = defaultArray.length > 2 ? defaultArray[2] : "",
        defaultProvinceIndex = 0,
        defaultCityIndex = 0,
        defaultAreaIndex = 0;
      //区域选择器
      var provinceArray = [],
        cityArray = [],
        areaArray = [];
      region.forEach((province, index) => {
        if (province.name == defaultProvince) defaultProvinceIndex = index;
        provinceArray.push({
          value: province.name,
          id: province.id,
          pid: province.pid,
          type: "province",
          index: index
        });
      });
      this.slots.push({
        flex: 1,
        defaultIndex: defaultProvinceIndex,
        textAlign: "center",
        values: provinceArray
      });
      region[defaultProvinceIndex].child.forEach((city, index) => {
        if (city.name == defaultCity) defaultCityIndex = index;
        cityArray.push({
          value: city.name,
          id: city.id,
          pid: city.pid,
          type: "city",
          index: index
        });
      });
      if (this.regionLevel > 1) {
        this.slots.push({
          flex: 1,
          defaultIndex: defaultCityIndex,
          textAlign: "center",
          values: cityArray
        });
      }
      region[defaultProvinceIndex].child[defaultCityIndex].child.forEach(
        (area, index) => {
          if (area.name == defaultArea) defaultAreaIndex = index;
          areaArray.push({
            value: area.name,
            id: area.id,
            pid: area.pid,
            type: "area",
            index: index
          });
        }
      );
      if (this.regionLevel > 2) {
        this.slots.push({
          flex: 1,
          defaultIndex: defaultAreaIndex,
          textAlign: "center",
          values: areaArray
        });
      }
    } else if (this.type == "date") {
      //日期时间选择器
      var yearArray = [],
        monthArray = [],
        dayArray = [],
        hourArray = [],
        minuteArray = [],
        secondArray = [],
        // 当前时间
        currentTimestamp = this.currentDate().timestamp,
        currentYear = this.currentDate().year,
        currentMonth = this.currentDate().month,
        currentDay = this.currentDate().day,
        currentHour = this.currentDate().hour,
        currentMinute = this.currentDate().minute,
        currentSecond = this.currentDate().second,
        // 默认时间
        defaultTimestamp = this.defaultDate().timestamp,
        defaultYear = this.defaultDate().year,
        defaultMonth = this.defaultDate().month,
        defaultDay = this.defaultDate().day,
        defaultHour = this.defaultDate().hour,
        defaultMinute = this.defaultDate().minute,
        defaultSecond = this.defaultDate().second,
        // 默认选中索引
        defaultYearIndex = 0,
        defaultMonthIndex = 0,
        defaultDayIndex = 0,
        defaultHourIndex = 0,
        defaultMinuteIndex = 0,
        defaultSecondIndex = 0,
        // 判断默认时间是否在可选范围内，true：选中默认时间 false：选中当前时间
        defaultDateInRegion =
          this.dateType == "none" ||
          (this.dateType == "after" && defaultTimestamp >= currentTimestamp) ||
          (this.dateType == "before" && defaultTimestamp <= currentTimestamp),
        // 开始 - 结束
        startYear = this.dateType == "after" ? currentYear : currentYear - 100,
        endYear = this.dateType == "before" ? currentYear : currentYear + 100,
        startMonth =
          this.dateType == "after" &&
          defaultDateInRegion &&
          defaultYear == currentYear
            ? currentMonth
            : 1,
        endMonth =
          this.dateType == "before" &&
          defaultDateInRegion &&
          defaultYear == currentYear
            ? currentMonth
            : 12,
        startDay =
          this.dateType == "after" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth
            ? currentDay
            : 1,
        endDay =
          this.dateType == "before" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth
            ? currentDay
            : this.$.date.daysCount(currentYear, currentMonth),
        startHour =
          this.dateType == "after" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth &&
          defaultDay == currentDay
            ? currentHour
            : 0,
        endHour =
          this.dateType == "before" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth &&
          defaultDay == currentDay
            ? currentHour
            : 23,
        startMinute =
          this.dateType == "after" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth &&
          defaultDay == currentDay &&
          defaultHour == currentHour
            ? currentMinute
            : 0,
        endMinute =
          this.dateType == "before" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth &&
          defaultDay == currentDay &&
          defaultHour == currentHour
            ? currentMinute
            : 59,
        startSecond =
          this.dateType == "after" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth &&
          defaultDay == currentDay &&
          defaultHour == currentHour &&
          defaultMinute == currentMinute
            ? currentSecond
            : 0,
        endSecond =
          this.dateType == "before" &&
          defaultDateInRegion &&
          defaultYear == currentYear &&
          defaultMonth == currentMonth &&
          defaultDay == currentDay &&
          defaultHour == currentHour &&
          defaultMinute == currentMinute
            ? currentSecond
            : 59;

      // 年
      for (var i = startYear, j = 0; i <= endYear; i++, j++) {
        // 选中时间
        if (i == (defaultDateInRegion ? defaultYear : currentYear))
          defaultYearIndex = j;
        yearArray.push({
          value: i,
          id: "",
          type: "year",
          index: j
        });
      }
      // 月
      for (var i = startMonth, j = 0; i <= endMonth; i++, j++) {
        // 选中时间
        if (i == (defaultDateInRegion ? defaultMonth : currentMonth))
          defaultMonthIndex = j;
        monthArray.push({
          value: i < 10 ? "0" + i : i,
          id: "",
          type: "month",
          index: j
        });
      }
      // 日
      const daysCount = this.$.date.daysCount(currentYear, currentMonth);
      for (var i = startDay, j = 0; i <= endDay; i++, j++) {
        // 选中时间
        if (i == (defaultDateInRegion ? defaultDay : currentDay))
          defaultDayIndex = j;
        dayArray.push({
          value: i < 10 ? "0" + i : i,
          id: "",
          type: "day",
          index: j,
          daysCount: daysCount
        });
      }
      // 时
      for (var i = startHour, j = 0; i <= endHour; i++, j++) {
        // 选中时间
        if (i == (defaultDateInRegion ? defaultHour : currentHour))
          defaultHourIndex = j;
        hourArray.push({
          value: i < 10 ? "0" + i : i,
          id: "",
          type: "hour",
          index: j
        });
      }
      // 分
      for (var i = startMinute, j = 0; i <= endMinute; i++, j++) {
        // 选中时间
        if (i == (defaultDateInRegion ? defaultMinute : currentMinute))
          defaultMinuteIndex = j;
        minuteArray.push({
          value: i < 10 ? "0" + i : i,
          id: "",
          type: "minute",
          index: j
        });
      }
      // 秒
      for (var i = startSecond, j = 0; i <= endSecond; i++, j++) {
        // 选中时间
        if (i == (defaultDateInRegion ? defaultSecond : currentSecond))
          defaultSecondIndex = j;
        secondArray.push({
          value: i < 10 ? "0" + i : i,
          id: "",
          type: "second",
          index: j
        });
      }
      // 类型 none date time year month day hour minute second date-year date-month date-day time-hour time-minute time-second
      if (
        this.dateMode == "none" ||
        this.dateMode == "date" ||
        this.dateMode == "year" ||
        this.dateMode == "month" ||
        this.dateMode == "day" ||
        this.dateMode == "hour" ||
        this.dateMode == "minute" ||
        this.dateMode == "second" ||
        this.dateMode == "date-year" ||
        this.dateMode == "date-month" ||
        this.dateMode == "date-day"
      ) {
        //年
        this.slots.push({
          flex: 1,
          defaultIndex: defaultYearIndex,
          textAlign: "center",
          values: yearArray,
          type: "year"
        });
      }
      if (
        this.dateMode == "none" ||
        this.dateMode == "date" ||
        this.dateMode == "month" ||
        this.dateMode == "day" ||
        this.dateMode == "hour" ||
        this.dateMode == "minute" ||
        this.dateMode == "second" ||
        this.dateMode == "date-month" ||
        this.dateMode == "date-day"
      ) {
        //月
        this.slots.push({
          flex: 1,
          defaultIndex: defaultMonthIndex,
          textAlign: "center",
          values: monthArray,
          type: "month"
        });
      }
      if (
        this.dateMode == "none" ||
        this.dateMode == "date" ||
        this.dateMode == "day" ||
        this.dateMode == "hour" ||
        this.dateMode == "minute" ||
        this.dateMode == "second" ||
        this.dateMode == "date-day"
      ) {
        //日
        this.slots.push({
          flex: 1,
          defaultIndex: defaultDayIndex,
          textAlign: "center",
          values: dayArray,
          type: "day"
        });
      }
      if (
        this.dateMode == "none" ||
        this.dateMode == "hour" ||
        this.dateMode == "minute" ||
        this.dateMode == "second" ||
        this.dateMode == "time" ||
        this.dateMode == "time-hour" ||
        this.dateMode == "time-minute" ||
        this.dateMode == "time-second"
      ) {
        //时
        this.slots.push({
          flex: 1,
          defaultIndex: defaultHourIndex,
          textAlign: "center",
          values: hourArray,
          type: "hour"
        });
      }
      if (
        this.dateMode == "none" ||
        this.dateMode == "minute" ||
        this.dateMode == "second" ||
        this.dateMode == "time" ||
        this.dateMode == "time-minute" ||
        this.dateMode == "time-second"
      ) {
        //分
        this.slots.push({
          flex: 1,
          defaultIndex: defaultMinuteIndex,
          textAlign: "center",
          values: minuteArray,
          type: "minute"
        });
      }
      if (
        this.dateMode == "none" ||
        this.dateMode == "second" ||
        this.dateMode == "time" ||
        this.dateMode == "time-second"
      ) {
        //秒
        this.slots.push({
          flex: 1,
          defaultIndex: defaultSecondIndex,
          textAlign: "center",
          values: secondArray,
          type: "second"
        });
      }
    }
    // 设置默认选中第1项
    this.setup();
  },
  mounted() {
    setTimeout(() => {
      this.isActive = true;
    }, 100);
  }
};
</script>
<style scoped>
.picker-container {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.picker-container.active {
  opacity: 1;
}
.picker {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  width: 100%;
  background-color: white;
  transition: all 0.25s ease-out;
}
.picker.active {
  transform: translateY(0);
}
</style>
<style>
.picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.01rem solid #eee;
}
.picker-toolbar div {
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
}
.picker-toolbar div span.active {
  color: #f00000;
}
.picker-items {
  height: 180px;
}
</style>